<template>
  <div>
    <Paper
      style="border-radius: 10px 10px 0px 0px; margin-bottom: 4px"
      title="筛选信息"
    >
      <row style="margin-top: 14px">
        <i-col v-for="item in firstOptions" :key="item.id" span="8">
          <div class="flex-row">
            <Label :name="item.name"></Label>
            <Input class="input" v-model="item.value"></Input>
          </div>
        </i-col>
        <i-col
          v-show="isExpending"
          v-for="item in secondOptions"
          :key="item.id"
          span="8"
        >
          <div class="flex-row">
            <Label :name="item.name"></Label>
            <Input class="input"></Input>
          </div>
        </i-col>
      </row>
      <div style="margin-top: 14px">
        <Button type="primary" @click="search()">
          <Icon type="md-search"></Icon>
          搜索
        </Button>
        <Button> 重置 </Button>
      </div>
      <p
        class="expend"
        @click="
          () => {
            isExpending = !isExpending;
          }
        "
      >
        {{ isExpending ? "收起" : "展开" }}
        <Icon v-if="!isExpending" type="ios-arrow-down" />
        <Icon v-if="isExpending" type="ios-arrow-up" />
      </p>
    </Paper>
    <Paper
      :handle="() => {}"
      style="border-radius: 0px 0px 10px 10px"
      title="代宰户列表"
    >
      <Divider style="margin: 14px 0px"></Divider>
      <Button class="button" type="primary">
        <Icon type="md-arrow-up" />
        导出数据
      </Button>
      <Button class="button">
        <Icon type="md-document" />
        导出报告
      </Button>
      <Table
        class="table"
        style="margin-top: 14px"
        ref="selection"
        :columns="columns"
        :data="data.slice((page - 1) * pageSize, page * pageSize)"
      >
        <template slot-scope="{ row }" slot="action">
          <span class="action" @click="check(row)">详情</span>
        </template>
      </Table>
      <div
        style="
          margin-top: 14px;
          align-items: center;
          justify-content: space-between;
        "
        class="flex-row"
      >
        <p class="total">{{ `共${data.length}条记录` }}</p>
        <Page size="small" :total="100" ref='page' show-sizer @on-change="pageClickHandle()" @on-page-size-change="pageSizeChange()"/>
      </div>
    </Paper>

    <Drawer
      :title="'代宰户：' + tempRow.proName"
      v-model="isChecking"
      width="600"
      :mask-closable="false"
    >
      <row :gutter="32">
        <i-col class="drawer-input" span="24">
          姓名
          <Input v-model="tempRow.proName" :disabled="!isEditing"></Input>
        </i-col>
        <i-col class="drawer-input" span="12">
          电话
          <Input v-model="tempRow.proTel" :disabled="!isEditing"></Input>
        </i-col>
        <i-col class="drawer-input" span="12">
          身份证号
          <Input v-model="tempRow.proIdnumber" disabled></Input>
        </i-col>
        <i-col class="drawer-input" span="12">
          地址
          <Input v-model="tempRow.proAddr" :disabled="!isEditing"></Input>
        </i-col>
      </row>
      <div class="drawer-footer">
        <Button
          style="margin-right: 8px"
          @click="
            () => {
              isChecking = false;
              isEditing = false;
            }
          "
          >退出
        </Button>
        <Button v-if="!isEditing" type="primary" @click="isEditing = true"
          >编辑</Button
        >
        <Button v-else type="primary" @click="primary()">保存</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import Paper from "../components/Paper.vue";
import Label from "../components/Label.vue";
import FilePreviewer from "../components/FilePreviewer.vue";
import { postRequset } from "../libs/fetch";

export default {
  name: "SQueryFarms",
  components: {
    Paper,
    Label,
    FilePreviewer,
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      isExpending: false,
      isChecking: false,
      isEditing: false,
      firstOptions: [
        {
          id: 1,
          name: "姓名",
          value:''
        },
        {
          id: 2,
          name: "地址",
          value:''
        },
        {
          id: 3,
          name: "电话号码",
          value:''
        },
      ],
      secondOptions: [
        {
          id: 4,
          name: "身份证号",
          value:''
        },
        {
          id: 5,
          name: "扩展条件",
        },
        {
          id: 6,
          name: "扩展条件",
        },
      ],

      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "姓名",
          key: "proName",
        },
        {
          title: "电话号码",
          key: "proTel",
        },
        {
          title: "地址",
          key: "proAddr",
        },
        {
          title: "身份证号",
          key: "proIdnumber",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          fixed: "right",
          align: "center",
        },
      ],
      data: [],
      page:1,
      pageSize:10,
      tempRow: {},
    };
  },
  methods: {
    pageClickHandle() {
      this.page = this.$refs.page.currentPage
    },
    pageSizeChange(){
      this.pageSize = this.$refs.page.currentPageSize
      console.log(this.pageSize);
    },
    getList() {
      postRequset("/sy-slaughter/pro/list")
        .then((res) => {
          let tempList = res.data;
          console.log(tempList);
          tempList.forEach((element) => {
            this.data.push({
              proName: element.proName,
              proTel: element.proTel,
              proAddr: element.proAddr,
              proIdnumber: element.proIdnumber,
            });
          });
      })
        .catch();
    },
    check(row) {
      this.isChecking = true;
      this.tempRow = { ...row };
    },
    primary() {
      this.isEditing = false;
      postRequset("/sy-slaughter/pro/update",{
        proName:this.tempRow.proName,
        proTel:this.tempRow.proTel,
        proAddr:this.tempRow.proAddr,
        proIdnumber:this.tempRow.proIdnumber,
      })
        .then((res) => {
          this.getList();
          //刷新页面
          location.reload();
        })
        .catch();
    },
    search(){
      this.data=[];
      let tName='';
      let tTel='';
      let tAddr='';
      let tIdNumber='';
      this.firstOptions.forEach(element => {
          if(element.id==1){
            tName=element.value;
          };
          if(element.id==2){
            tTel=element.value;
          }
          if(element.id==3){
            tAddr=element.value;
          }
          if(element.id==4){
            tIdNumber=element.value;
          }
        });
      postRequset("/sy-slaughter/pro/select",{
        proName: tName,
        proTel: tTel,
        proAddr: tAddr,
        proIdnumber: tIdNumber,
      })
        .then((res) => {
          let tempList = res.data;
          console.log(tempList);
          tempList.forEach((element) => {
            this.data.push({
              proName: element.proName,
              proTel: element.proTel,
              proAddr: element.proAddr,
              proIdnumber: element.proIdnumber,
            });
          });
        })
        .catch();
    }
  },
};
</script>

<style scoped lang="less">
.flex-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 14px;
}
.input {
  max-width: 230px;
}
.expend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;

  font-size: 12px;
  font-weight: 400;
  color: #1d86f0;
  margin-bottom: -8px;
  cursor: pointer;
}
.button {
  margin-left: 0px;
  margin-right: 4px;
  padding-left: 10px;
}
.table {
  &ivu-table {
    background-color: #fff;
  }
}
.action {
  font-size: 14px;
  font-weight: 400;
  color: #1d86f0;
  margin: 0px 4px;
  cursor: pointer;
}
.total {
  margin-left: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #565e66;
}
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.drawer-input {
  margin-bottom: 14px;
}
</style>
<style>
.ivu-table th {
  background-color: #fff !important;
}
</style>